<template>
  <el-dialog
    v-model="dialogVisible"
    :title="msgText + '角色'"
    width="30%"
    @close="addCateDiaClose"
  >
    <!-- 添加分类表单 -->
    <el-form
      :model="addCateForm"
      :rules="addCateFormRules"
      ref="addCateFormRef"
      label-width="100px"
    >
      <el-form-item label="分类名称:" prop="cat_name">
        <el-input v-model="addCateForm.cat_name" />
      </el-form-item>
      <el-form-item label="父级分类：">
        <!-- options用来指定数据源 -->
        <!-- props用来指定数据对象 -->
        <el-cascader
          :append-to-body="false"
          v-model="selectedKeys"
          :options="parentCateList"
          :props="props"
          @change="handleChange"
          clearable
      /></el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="() => (dialogVisible = false)">取消</el-button>
        <el-button
          type="primary"
          @click="onSubmit(addCateFormRef, addCateForm)"
        >
          确认</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { getCategory, saveCategory } from '@/api/category/index'
import { ElMessage } from 'element-plus'
import { layer } from '@layui/layer-vue'
//获取骨架的小仓库
import useLayOutSettingStore from '@/store/modules/setting'

let layOutSettingStore = useLayOutSettingStore()

const dialogVisible = ref(false)
const isCreate = ref(true)
const msgText = ref('')
//form表单对象
const addCateFormRef = ref()

//级联选择器配置对象
const props = {
  //指定选定的值
  value: 'id',
  //指定看到的属性
  label: 'title',
  //指定嵌套的属性
  children: 'children',
  //次级菜单的展开方式,hover或者click
  expandTrigger: 'hover',
  // 是否严格的遵守父子节点不互相关联,每一级都可以选择
  checkStrictly: true
}
//选中的父级分类的Id数组，必须是数组
let selectedKeys = reactive([])
//级联选择器，父级分类列表
let parentCateList = <[]>reactive([])

const initData = () => ({
  //将要添加的分类的名称
  cat_name: '',
  //父级分类的ID
  cat_pid: '0',
  //当前分类等级，默认要添加的是1级分类
  cat_level: 1
})

interface RuleForm {
  cat_name: string
  cat_pid: string
  cat_level: number
}

const addCateForm = reactive<RuleForm>(initData())

//弹窗显示时的方法
const initAndShow = (id = 0) => {
  getParentCateList()

  dialogVisible.value = true

  //这样处理的两个好处
  //1.每次点击得到一个新的对象，而且不破坏响应式
  Object.assign(addCateForm, initData())

  if (id) {
    isCreate.value = false
    msgText.value = '更新'
  } else {
    isCreate.value = true
    msgText.value = '创建'
  }
}

//添加分类表单的验证规则对象
const addCateFormRules = reactive({
  cat_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
})

//级联选择器的选中项发生变化就会触发
const handleChange = () => {
  console.log(selectedKeys)

  //如果selectedKeys数组总的length大于0，证明选中父级分裂、
  //反之，就说明没有选中任何父级分类
  if (Array.isArray(selectedKeys) && selectedKeys.length > 0) {
    //父级分类的Id
    addCateForm.cat_pid = selectedKeys[selectedKeys.length - 1]
    //为当前分类的登记赋值
    addCateForm.cat_level = selectedKeys.length
    return
  } else {
    //父级分类的Id
    addCateForm.cat_pid = '0'
    //为当前分类的登记赋值
    Array.isArray(selectedKeys)
      ? (addCateForm.cat_level = selectedKeys.length)
      : 1
  }
}

//获取父级分类的数据列表
const getParentCateList = async () => {
  // 在组件挂载后执行的代码
  const res = await getCategory()

  //合并，不破坏响应式
  Object.assign(parentCateList, res.data)
  //这中写法不可以，会破坏响应式
  //parentCateList = res.data
}

//关闭分类窗口事件
const addCateDiaClose = () => {
  //关闭验证规则
  addCateFormRef.value.resetFields()
  //清空选择的数组
  selectedKeys = []

  Object.assign(addCateForm, initData())

  console.log(selectedKeys)
}

//提交表单,添加新的分类
const onSubmit = async (addCateFormRef: any, addCateForm: any) => {
  console.log(addCateForm.cat_name, 'cate_name')
  await addCateFormRef.validate(async (valid: any, fields: any) => {
    if (valid) {
      console.log(addCateForm.cat_name, 'cate_name1')
      let data = {
        title: '',
        parent_id: '',
        level: 1
      }
      data.title = addCateForm.cat_name
      data.parent_id = addCateForm.cat_pid
      data.level = addCateForm.cat_level

      try {
        const res = await saveCategory(data)
        console.log(res)
        layer.msg(`${res.message}...`, { icon: 1, time: 2000 })
        //提示成功信息
        // ElMessage({
        //   type: 'success',
        //   message: res.message
        // })
      } catch (err) {
        //提示错误信息
        ElMessage({
          type: 'error',
          message: '新增分类失败'
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })

  dialogVisible.value = false
  setTimeout(function () {
    layOutSettingStore.refsh = !layOutSettingStore.refsh
  }, 1000)
}

//setup语法糖默认方法和属性是关闭的，通过defineExpose对外暴露
defineExpose({
  initAndShow
})
</script>

<style scoped lang="scss">
.el-cascader {
  width: 100% !important;
}
</style>
